.search-box {
  position: relative;
  display: inline-block;
  margin-inline-start: 1rem;

  @media print {
    display: none;
  }

  input {
    display: inline-block;

    width: var(--search-input-width);
    height: 2rem;
    padding-block: 0;
    padding-inline: 2rem 0.5rem;
    border: 1px solid var(--search-c-divider);
    border-radius: 2rem;

    background: var(--search-c-bg) url('search.svg') 0.6rem 0.5rem no-repeat;
    background-size: 1rem;
    color: var(--search-c-text);
    outline: none;

    font-size: 0.9rem;
    line-height: 2rem;

    cursor: text;

    appearance: none;

    transition: all ease 0.3s;

    @media (max-width: 719px) {
      position: relative;
      width: 0;
      border-color: transparent;
      cursor: pointer;
    }

    &:focus {
      border-color: var(--search-c-accent);
      cursor: auto;

      @media (max-width: 719px) {
        inset-inline-start: 0;
        width: 10rem;
        cursor: text;
      }

      @media (max-width: 419px) {
        width: 8rem;
      }
    }
  }

  .suggestions {
    position: absolute;
    inset-inline-end: 0;
    top: 2rem;

    width: var(--search-result-width);
    padding: 0.4rem;
    border: 1px solid var(--search-c-divider);
    border-radius: 6px;

    background: var(--search-c-bg);
    list-style-type: none;

    @media (max-width: 419px) {
      inset-inline-end: -0.5rem;
      width: calc(100vw - 4rem);
    }
  }

  .suggestion {
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    line-height: 1.4;
    cursor: pointer;

    a {
      color: var(--search-c-item-text);
      white-space: normal;
    }

    &.focus {
      background-color: var(--search-c-item-focus);

      a {
        color: var(--search-c-accent);
      }
    }

    .page-title {
      font-weight: 600;
    }

    .page-header {
      margin-inline-start: 0.25em;
      font-size: 0.9em;
    }
  }
}
